<template>
	<view class="u-page">
		<view class="bg">
			<view class="u-demo-block">
				<view class="u-demo-block__content">
					<u-row customStyle="margin-top: 75rpx">
					    <u-col span="2">
					        <view class="demo-layout col_center">
								<image style="width: 15rpx; height: 27rpx;" src="../../static/userCar/left_arrow.png" @tap="goBack()"></image>
							</view>
					    </u-col>
					    <u-col span="8">
					        <view class="demo-layout col_center">
								<span style="color: white; font-size: 32rpx;">顺风车</span> 
							</view>
					    </u-col>
					    <u-col span="2">
					        <view class="demo-layout col_center">
								<image style="width: 34rpx; height: 35rpx;" src="../../static/userCar/function23.png"></image>
							</view>
					    </u-col>
					</u-row>
				</view>	
			</view>
			<view class="u-demo-block">
				<view class="u-demo-block__content">
					<u-row customStyle="margin-top: 75rpx">
						 <u-col span="4">
							 <view class="demo-layout col_center">
								  <u-picker :show="show" ref="uPicker" :columns="columns" @confirm="confirm" @change="changeHandler" @cancel="cancelHandler"></u-picker>			 
								  <view class="picker">
									  <span @click="show = true;isPick=0">{{Departure}}</span>
									  <image class="dropdown-icon" src="../../static/tu/rentalcars_downarrow.png" mode="widthFix"></image>
								  </view>
							 </view>
						 </u-col>
						 <u-col span="4">
							<view class="demo-layout col_center">
								<u-picker :show="show" ref="uPicker" :columns="columns" @confirm="confirm" @change="changeHandler" @cancel="cancelHandler"></u-picker>
								<view class="picker">
									  <span @click="show = true;isPick=1">{{DestinationCity}}</span>
									  <image class="dropdown-icon" src="../../static/tu/rentalcars_downarrow.png" mode="widthFix"></image>
								</view>
						 	</view>
						 </u-col>
						 <u-col span="4">
						 	<view class="demo-layout col_center">
								<u-datetime-picker :show="showtime" v-model="value1" :minDate="1587524800000" :maxDate="1786778555000" :formatter="formatter" mode="date" @cancel="cancelHandlerTime" @confirm="confirmtime"></u-datetime-picker>
								<view class="picker">
									  <span @click="showtime = true;isPick=2">{{UseTime}}</span>
									  <image class="dropdown-icon" src="../../static/tu/rentalcars_downarrow.png" mode="widthFix"></image>
								</view>
						 	</view>
						 </u-col>
					</u-row>
				</view>
			</view>
			<view v-for="(listItem,listIndex) in list" :key="listIndex">
				<!-- 线条 -->
				<div style="margin-top: 40rpx;">
					<view>
						<hr size=5  style="background-color:#E5E5E5;border: none;">
					</view>
				</div>
				<view class="u-demo-block">
					 <view class="u-demo-block__content">
						 <view class="album">
						 	<view class="album__avatar">
						 		<image :src="listItem.img" mode=""
						 			style="width: 187rpx;height: 87rpx;"></image>
						 	</view>
						 	<view class="album__content">
								<view style="display: flex;">
									<view>
										<u--text :text="listItem.startcity" bold size="32rpx" color="#252525" margin="33rpx 0 0 0"></u--text>
										<pre>
											<u--text
											:text="listItem.startTime"
											margin="20rpx 0 0 0"
											size="24rpx"
											color="#626262"
											></u--text>
										</pre>
									</view>
								</view>
								<view class="line">
									<image src="../../static/tu/line.png" mode="" style="width: 186rpx;height: 8rpx;"></image>
								</view>
								<view style="display: flex;margin-left: 15rpx;">
									<view>
										<u--text :text="listItem.endcity" bold size="32rpx" color="#252525" margin="33rpx 0 0 0"></u--text>
										<pre>
											<u--text
											:text="listItem.endTime"
											margin="20rpx 0 0 0"
											size="24rpx"
											color="#626262"
											></u--text>
										</pre>
									</view>
								</view>
						 	</view>
						 </view>
					 </view>
					 <!-- 线条 -->
					 <div style="margin-top: 30rpx;">
					 	<view>
					 		<hr size=3  style="background-color:#E5E5E5;border: none;">
					 	</view>
					 </div>
					 <u--text :text="listItem.title"  size="24rpx" color="#252525" margin="19rpx 0 0 30rpx"></u--text>
					 <view class="u-demo-block__content">
					 	<u-row customStyle="margin-top: 20rpx">
					 	    <u-col span="4">
					 	        <view class="demo-layout col_center">
					 				<u--text
					 				:text="listItem.info1"
					 				size="24rpx"
					 				color="#858585"
					 				></u--text>
					 			</view>
					 	    </u-col>
					 	    <u-col span="4">
					 	        <view class="demo-layout col_center">
					 				<u--text
					 				:text="listItem.info2"
					 				size="24rpx"
					 				color="#858585"
					 				></u--text>
					 			</view>
					 	    </u-col>
					 	    <u-col span="4">
					 	        <view class="demo-layout">
					 				<u--text
					 				:text="listItem.info3"
					 				size="24rpx"
					 				color="#858585"
					 				></u--text>
					 			</view>
					 	    </u-col>
					 	</u-row>
					 </view>	
				</view>
			</view>
			<!--底部留白-->
			<div style="height: 40rpx;"></div>
		</view>
	</view>
</template>

<script>
	export default {
	        data() {
	            return {
	                show: false,
					showtime:false,
	                loading: false,
					Departure:"出发城市",
					DestinationCity:"目的城市",
					UseTime:"用车时间",
					selectUseTime:'',
					isPick: 0,
					value1: Number(new Date()),
	                columns: [
	                    ['湖南','湖北','北京','天津','河北','山西','上海','江苏','浙江','河南','广东','四川','贵州','重庆'],
	                    ['长沙','邵阳','岳阳','常德','益阳','娄底','怀化','郴州','张家界','株洲','湘潭','衡阳','永州']
	                ],
	                columnData: [
						['长沙','邵阳','岳阳','常德','益阳','娄底','怀化','郴州','张家界','株洲','湘潭','衡阳','永州'],
						['武汉','黄石','十堰','宜昌','襄阳','鄂州','荆门','孝感','荆州','黄冈','咸宁','随州'],
	                    ['海淀区','顺义区','通州区','大兴区','房山区','东城区','丰台区','平谷区','密云区','怀柔区'],
	                    ['和平区','河东区','河西区','南开区','河北区','红桥区','滨海新区','东丽区','西青区','津南区'],
						['石家庄','唐山','秦皇岛','邯郸','邢台','保定','张家口','承德','沧州','廊坊','衡水'],
						['太原','大同','朔州','忻州','阳泉','吕梁','晋中','长治','晋城','临汾','运城'],
						['黄浦区','徐汇区','长宁区','静安区','普陀区','虹口区','杨浦区','浦东新区','闵行区','宝山区','嘉定区'],
						['苏州','无锡','常州','镇江','南京','南通','扬州','泰州','盐城','淮安','宿迁','徐州','连云港'],
						['杭州','湖州','绍兴','宁波','嘉兴','丽水','台州','温州','金华','衢州','舟山'],
						['郑州','洛阳','开封','漯河','安阳','信阳','南阳','濮阳','周口','新乡','三门峡','驻马店','平顶山'],
						['广州','深圳','佛山','东莞','中山','珠海','江门','肇庆','惠州','汕头','潮州','揭阳','湛江'],
						['成都','泸州','广元','遂宁','南充','宜宾','达州','攀枝花','眉山','广安','雅安','巴中','内江'],
						['贵阳','遵义','六盘水','安顺','毕节','铜仁'],
						['万州区','涪陵区','渝中区','大渡口区','江北区','沙坪坝区','九龙坡区','南岸区','北碚区','万盛区','双桥区','渝北区','巴南区']
	                ],
					list:[{
						img:'../../static/tu/details_car.png',
						startcity:'怀化',
						startTime:'05-04 周四',
						endcity:'长沙',
						endTime:'05-04 周四',
						title:'车型信息',
						info1:'A 588ku 自动尊享',
						info2:'5座',
						info3:'三厢'
					},{
						img:'../../static/tu/details_car.png',
						startcity:'怀化',
						startTime:'05-04 周四',
						endcity:'邵阳',
						endTime:'05-04 周四',
						title:'车型信息',
						info1:'A 588ku 自动尊享',
						info2:'5座',
						info3:'三厢'
					},{
						img:'../../static/tu/details_car.png',
						startcity:'长沙',
						startTime:'05-04 周四',
						endcity:'衡阳',
						endTime:'05-04 周四',
						title:'车型信息',
						info1:'A 588ku 自动尊享',
						info2:'5座',
						info3:'三厢'
					},{
						img:'../../static/tu/details_car.png',
						startcity:'长沙',
						startTime:'05-05 周五',
						endcity:'邵阳',
						endTime:'05-05 周五',
						title:'车型信息',
						info1:'A 588ku 自动尊享',
						info2:'5座',
						info3:'三厢'
					},{
						img:'../../static/tu/details_car.png',
						startcity:'长沙',
						startTime:'05-05 周五',
						endcity:'衡阳',
						endTime:'05-05 周五',
						title:'车型信息',
						info1:'A 588ku 自动尊享',
						info2:'5座',
						info3:'三厢'
					},{
						img:'../../static/tu/details_car.png',
						startcity:'怀化',
						startTime:'05-05 周五',
						endcity:'衡阳',
						endTime:'05-05 周五',
						title:'车型信息',
						info1:'A 588ku 自动尊享',
						info2:'5座',
						info3:'三厢'
					}],
					//备份数组
					backupsList:[{
						img:'../../static/tu/details_car.png',
						startcity:'怀化',
						startTime:'05-04 周四',
						endcity:'长沙',
						endTime:'05-04 周四',
						title:'车型信息',
						info1:'A 588ku 自动尊享',
						info2:'5座',
						info3:'三厢'
					},{
						img:'../../static/tu/details_car.png',
						startcity:'怀化',
						startTime:'05-04 周四',
						endcity:'邵阳',
						endTime:'05-04 周四',
						title:'车型信息',
						info1:'A 588ku 自动尊享',
						info2:'5座',
						info3:'三厢'
					},{
						img:'../../static/tu/details_car.png',
						startcity:'长沙',
						startTime:'05-04 周四',
						endcity:'衡阳',
						endTime:'05-04 周四',
						title:'车型信息',
						info1:'A 588ku 自动尊享',
						info2:'5座',
						info3:'三厢'
					},{
						img:'../../static/tu/details_car.png',
						startcity:'长沙',
						startTime:'05-05 周五',
						endcity:'邵阳',
						endTime:'05-05 周五',
						title:'车型信息',
						info1:'A 588ku 自动尊享',
						info2:'5座',
						info3:'三厢'
					},{
						img:'../../static/tu/details_car.png',
						startcity:'长沙',
						startTime:'05-05 周五',
						endcity:'衡阳',
						endTime:'05-05 周五',
						title:'车型信息',
						info1:'A 588ku 自动尊享',
						info2:'5座',
						info3:'三厢'
					},{
						img:'../../static/tu/details_car.png',
						startcity:'怀化',
						startTime:'05-05 周五',
						endcity:'衡阳',
						endTime:'05-05 周五',
						title:'车型信息',
						info1:'A 588ku 自动尊享',
						info2:'5座',
						info3:'三厢'
					}]
	            }
	        },
	        methods: {
				confirm(e) {
					this.list=[];
					//出发城市下拉框
					if (this.isPick==0) {
						this.Departure = e.value[1];
						if(this.DestinationCity==="目的城市"&&this.UseTime==="用车时间"){
							//只选择了开始城市
							for(let i in this.backupsList){
								if(this.backupsList[i].startcity.indexOf(this.Departure)!=-1){
									this.list.push(this.backupsList[i]);
								}
							}
						}else if(this.UseTime==="用车时间"){
							//选择了目的城市和开始城市
							for(let i in this.backupsList){
								if((this.backupsList[i].startcity.indexOf(this.Departure)!=-1)&&(this.backupsList[i].endcity.indexOf(this.DestinationCity)!=-1)){
									this.list.push(this.backupsList[i]);
								}
							}
						}else if(this.DestinationCity==="目的城市"){
							//用车时间和开始城市
							for(let i in this.backupsList){
								if((this.backupsList[i].startcity.indexOf(this.Departure)!=-1)&&(this.backupsList[i].startTime.indexOf(this.selectUseTime)!=-1)){
									this.list.push(this.backupsList[i]);
								}
							}
						}else{
							//三个下拉框都选了
							for(let i in this.backupsList){
								if((this.backupsList[i].startcity.indexOf(this.Departure)!=-1)&&(this.backupsList[i].startTime.indexOf(this.selectUseTime)!=-1)&&
								(this.backupsList[i].endcity.indexOf(this.DestinationCity)!=-1)){
									this.list.push(this.backupsList[i]);
								}
							}
						}
					} else if (this.isPick==1) {  //目的城市下拉框
						this.DestinationCity = e.value[1];
						if(this.Departure==="出发城市"&&this.UseTime==="用车时间"){
							for(let i in this.backupsList){
								if(this.backupsList[i].endcity.indexOf(this.DestinationCity)!=-1){
									this.list.push(this.backupsList[i]);
								}
							}
						}else if(this.UseTime==="用车时间"){
							for(let i in this.backupsList){
								if((this.backupsList[i].endcity.indexOf(this.DestinationCity)!=-1)&&this.backupsList[i].startcity.indexOf(this.Departure)!=-1){
									this.list.push(this.backupsList[i]);
								}
							}
						}else if(this.Departure==="出发城市"){
							for(let i in this.backupsList){
								if((this.backupsList[i].endcity.indexOf(this.DestinationCity)!=-1)&&(this.backupsList[i].startTime.indexOf(this.selectUseTime)!=-1)){
									this.list.push(this.backupsList[i]);
								}
							}
						}else{
							for(let i in this.backupsList){
								if((this.backupsList[i].startcity.indexOf(this.Departure)!=-1)&&(this.backupsList[i].startTime.indexOf(this.selectUseTime)!=-1)&&
								(this.backupsList[i].endcity.indexOf(this.DestinationCity)!=-1)){
									this.list.push(this.backupsList[i]);
								}
							}
						}
					}
					this.show = false;
				},
				cancelHandler() {
					this.show = false;
				},
	            changeHandler(e) {
					const {
						columnIndex,
						value,
	                    values, // values为当前变化列的数组内容
	                    index,
	            		// 微信小程序无法将picker实例传出来，只能通过ref操作
	                    picker = this.$refs.uPicker
	                } = e
	                    // 当第一列值发生变化时，变化第二列(后一列)对应的选项
	                    if (columnIndex === 0) {
	                    // picker为选择器this实例，变化第二列对应的选项
	                    picker.setColumnValues(1, this.columnData[index])
	                }
	            },
				cancelHandlerTime(){
					this.showtime=false;
				},
				formatter(type, value) {
				    if (type === 'year') {
				        return `${value}年`
				    }
				    if (type === 'month') {
				        return `${value}月`
				    }
				    if (type === 'day') {
				        return `${value}日`
				    }
					// if(type==='hour'){
					// 	return `${value}时`
					// }
					// if(type==='minute'){
					// 	return `${value}分`
					// }
				    return value
				},
				confirmtime(e){  //用车时间下拉框
					this.list=[];
					// 处理时间戳
					const timeFormat = uni.$u.timeFormat;
					this.UseTime = timeFormat(e.value, 'yyyy-mm-dd');
					this.selectUseTime=(timeFormat(e.value,'mm-dd'));
					if(this.Departure==="出发城市"&&this.DestinationCity==="目的城市"){
						for(let i in this.backupsList){
							if(this.backupsList[i].startTime.indexOf(this.selectUseTime)!=-1){
								this.list.push(this.backupsList[i]);
							}
						}
					}else if(this.Departure==="出发城市"){
						for(let i in this.backupsList){
							if((this.backupsList[i].endcity.indexOf(this.DestinationCity)!=-1)&&(this.backupsList[i].startTime.indexOf(this.selectUseTime)!=-1)){
								this.list.push(this.backupsList[i]);
							}
						}
					}else if(this.DestinationCity==="目的城市"){
						for(let i in this.backupsList){
							if((this.backupsList[i].startcity.indexOf(this.Departure)!=-1)&&(this.backupsList[i].startTime.indexOf(this.selectUseTime)!=-1)){
								this.list.push(this.backupsList[i]);
							}
						}
					}else{
						for(let i in this.backupsList){
							if((this.backupsList[i].startcity.indexOf(this.Departure)!=-1)&&(this.backupsList[i].startTime.indexOf(this.selectUseTime)!=-1)&&
							(this.backupsList[i].endcity.indexOf(this.DestinationCity)!=-1)){
								this.list.push(this.backupsList[i]);
							}
						}
					}
					
					this.showtime=false;
				},
				goBack() {
					uni.switchTab({
						//关闭当前页面，返回上一页面或多级页面。
						url: '/pages/zuche/zuche',
					});
				}
	        }
	    }
</script>

<style lang="scss">
	.bg{
		background-image: url("../../static/tu/details_banner.png");
		width: 100%;
		height: 150rpx;
		border-top: 1px solid #4481EB ;
	}
	.col_center{
		margin: auto;
	}
	.dropdown-icon {
		width: 18rpx;
		height: 18rpx;
		margin-left: 15rpx;
		margin-right: 20rpx;
		margin-top: auto;
		margin-bottom: auto;
	}
	.col_center{
		margin: auto;
	}
	.album {
		@include flex;
		align-items: flex-start;
	
		&__avatar {
			margin-top: 40rpx;
			margin-left: 35rpx;
		}
	
		&__content {
			margin-left: 15px;
			flex: 1;
			display: inline-flex;
		}
	}
	.line{
		display: flex;
		margin-top: 80rpx;
		margin-left: 5rpx;
	}
</style>